<template>
  <v-card class="container"
          v-loading="is_loading">
    <div>
      <v-card
          outlined
          class="ma-5 control-block"
          >
          <v-card-title>认领学者</v-card-title>
          <v-card-text>
            <div class="search-form">
              <v-text-field
                  outlined
                  :hide-details="true"
                  class="search-field"
                  label="姓名"
                  v-model="keyword"
                  ></v-text-field>

              <v-btn
                  :disabled="!keyword"
                  color="success"
                  class="mr-4"
                  @click="search"
                  >
                  <v-icon>{{icons.mdiMagnify}}</v-icon>
                  搜索
              </v-btn>

              <v-btn
                  color="primary"
                  class="mr-4"
                  @click="newProfile"
                  >
                  <v-icon>{{icons.mdiAccountPlus}}</v-icon>
                  新建主页
              </v-btn>
            </div>
          </v-card-text>
      </v-card>

      <scholar-list :scholars="follows">
        <template v-slot:action="v">
          <router-link :to="'/application/bind/'+v.scholar.id">
            <v-btn
                color="primary"
                >
                <v-icon>{{icons.mdiLink}}</v-icon>
                认领
            </v-btn>
          </router-link>
        </template>
      </scholar-list>
      <div class="no-exist" v-if="is_loading ==false && follows.length === 0">
        暂无相关科研人员信息
      </div>
    </div>
  </v-card>
</template>

<script>
import { mdiMagnify, mdiLink, mdiAccountPlus } from "@mdi/js"
import ScholarList from "@/components/scholar/ScholarList.vue";

export default {
  components: {
    ScholarList
  },
  data() {
    return {
      follows: [],
      keyword: "",
      icons: {
        mdiMagnify,
        mdiLink,
        mdiAccountPlus
      },
      is_loading: false
    }
  },
  methods: {
    newProfile(){
      const that = this;
      this.$api.getScholar.New_one(localStorage.getItem('username'))
        .then(function (response){
          that.$notify.success({
            title: '创建门户成功',
            message: '芜湖'
          })
          console.log(response)
          that.$router.push({path: '/profile/' + response._id});
        })
        .catch(function (error){
          that.$notify.error({
            title: '创建门户失败',
            message: error.message
          })
        })
    },
    search() {
      this.is_loading = true
      this.$api.search.searchAuthor(this.keyword)
        .then(data => this.follows = data)
        .catch(error => this.$notify({
          message: error.api_detail || error,
          title: "API error"
        }))
        .finally(() => this.is_loading = false)
    }
  },
}
</script>

<style lang="sass" scoped>
.container
  padding: 1cm

.search-form
  align-items: center
  display: flex
  .search-field
    max-width: 10cm
    margin-right: .3cm
</style>
<style scoped>
.no-exist{
  text-align: center;
  font-size: 20pt;
}
</style>

